<template>
	<z-paging ref="paging" v-model="dataList" @query="getDataList" bg-color="#F4F5FA">
		<template #top>
			<su-status-bar />
			<view class="top">

				<view class="top-box">
					<!-- <image class="nav-bg" src="@/static/images/nav_bg.png"></image> -->
					<!-- 	<view class="nav-title">
						<uni-icons type="left" color="#FFFFFF" size="25" @click="onClickNavBack"></uni-icons>

						<view style="margin: 0 auto;">
							我的团队
						</view>

					</view> -->
					<uni-nav-bar left-icon="left" backgroundColor="transparent" :border="false" color="#fff"
						@clickLeft="onClickNavBack">
						<view class="nav-title">收支明细</view>
					</uni-nav-bar>
					<view class="total-box" :style="customStyle">
						<view class="total-team">
							<view class="left">

								<view class="value">
									{{pageInfo.type=='SURPLUS'?balanceInfo.surplus:pageInfo.type=='INTEGRAL'?balanceInfo.integral:pageInfo.type=='CONTRIBUTION'?balanceInfo.contribution:'0'}}
								</view>
								<view class="name">
									{{getText(pageInfo.type)}}
								</view>

								<!-- <view class="value">{{invitationInfo.num?invitationInfo.num:0}}</view> -->
							</view>
							<view v-if="pageInfo.type=='SURPLUS'">
								<button style="border-radius: 50px;" type="primary" size="mini" plain hover-class="none"
									@click="goWithdraw">提现</button>
								<button v-if="isT" style="border-radius: 50px;margin-left: 25rpx;" type="primary" size="mini" plain
									hover-class="none" @click="goTransfer">转账</button>
									{{userInfo}}
							</view>
							<!-- <view v-else style="display: flex;">
								<view class="btn1" v-if="pageInfo.type=='ORIGINAL_ENERGY'"
									@click="toTransfer('energyPool')">投入能量池</view>
								<view class="btn2" v-if="pageInfo.type=='GREEN_ENERGY'"
									@click="toTransfer('originalEnergy')">转换成原始能量</view>
								<view class="btn3" v-if="pageInfo.type=='GREEN_ENERGY'" @click="toTransfer('surplus')">
									转换成余额</view>

							</view> -->

						</view>
						<!-- 	<view class="total-identity">
							<view class="identity-item">
								<view class="name">
									零售商
								</view>
								<view class="value">
									{{invitationInfo.numLS?invitationInfo.numLS:0}}
								</view>
							</view>
							<view class="line"></view>
							<view class="identity-item">
								<view class="name">
									批发商
								</view>
								<view class="value">
									{{invitationInfo.numPF?invitationInfo.numPF:0}}
								</view>
							</view>
							<view class="line"></view>
							<view class="identity-item">
								<view class="name">
									代理商
								</view>
								<view class="value">
									{{invitationInfo.numDL?invitationInfo.numDL:0}}
								</view>
							</view>
						</view> -->
					</view>

				</view>

			</view>

			<view class="tabs" :style="customStyle">
				<view>
					<su-tabs style="width: 50%;background: transparent;border: 0;" :list="tabMaps" lineWidth="20"
						lineColor="#527FFF" :activeStyle="{ color: '#527FFF', fontWeight: 600,
			fontsize: '28rpx' }" :scrollable="false" @change="onTabsChange" :current="currentTab"></su-tabs>
				</view>
			</view>
		</template>
		<!-- <template #empty>
			<view class="">该会员没有直推</view>
		</template> -->
		<view class="bottom">
			<view class="logs-box" :style="customStyle" v-if="dataList.length>0">
				<view style="width: 100%;" v-for="(item,index) in dataList" :key="item.id">
					<view class="log">
						<view class="log-left">
							<!-- <image class="avatar" :src="item.avatar" mode="aspectFit"></image> -->
							<view>
								<view class="operation">{{item.title}}</view>
								<view class="time">
									{{formatTime(item.createTime)}}
								</view>
							</view>
						</view>
						<view class="log-right">
							<text
								:style="item.operation == 'CONSUMPTION' || item.operation == 'TRANSFER' ? 'color: #E42121' : ''">
								{{
							    item.operation == 'CONSUMPTION' || item.operation == 'TRANSFER' ? '-' : 
							    item.operation == 'RECEIVE' ? '+' : 
							    ''
							  }}
								{{ pageInfo.type == 'SURPLUS' ? '￥' : '' }}
								{{ item.value }}
							</text>
						</view>

					</view>
					<!-- <su-line color="red" /> -->
					<view class="line" v-if="index!=dataList.length-1"></view>
				</view>
			</view>
		</view>

		<!-- <s-tabbar path="/pages/index/token" /> -->
	</z-paging>



</template>

<script setup>
	import {

		ref,
		reactive,
		// computed
	} from 'vue';
	// import {
	// 	onShow,
	// 	// onload
	// } from '@dcloudio/uni-app'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';

	import assetApi from '@/sheep/api/member/asset'
	import {
		timeFormat
	} from '@/sheep/helper/index'
	import sheep from '@/sheep';
	const dataList = ref([])
	const paging = ref(null)
	const pageInfo = reactive({
		pageNo: 1,
		pageSize: 10,
		type: '',

	})
	const isT=ref(0)
	// const userInfo = computed(() => sheep.$store('user').userInfo || {});
	const getDataList = async (pageNo, pageSize) => {
		pageInfo.pageNo = pageNo ? pageNo : pageInfo.pageNo
		pageInfo.pageSize = pageSize ? pageSize : pageInfo.pageSize


		console.log('pageInfo', pageInfo);
		// 获取资产列表
		let res = await assetApi.getAssetDetailsLog(pageInfo)
		console.log('获取资产列表', res)
		// setTimeout(() => {
		if (res.code == 0) {
			paging.value.complete(res.data.list);
		} else {
			paging.value.complete(false);
		}
		// paging.value.complete(10);
		// }, 1000);
	}

	function goTransfer() {
		uni.navigateTo({
			url: "/pages/me/Transfer"
		})
	}

	const onClickNavBack = () => {
		uni.switchTab({
			url: '/pages/index/me'

		})
	}
	const goWithdraw = () => {
		// return sheep.$helper.toast('暂未开放');
		// if (uni.getStorageSync('userId') == "1817840189498839042") {
		uni.navigateTo({
			url: '/pages/me/components/withdraw'
		})
		// }

	}
	const toTransfer = (type) => {
		switch (type) {
			case 'energyPool':
				uni.navigateTo({
					url: '/pages/me/components/energyPool'
				})
				break;
			case 'originalEnergy':
				uni.navigateTo({
					url: '/pages/me/components/transfer?type=' + type
				})
				break;
			case 'surplus':
				uni.navigateTo({
					url: '/pages/me/components/transfer?type=' + type
				})
				break;
			default:
				break;
		}
	}

	const getText = (type) => {
		switch (type) {
			case 'SURPLUS':
				return '我的余额 (元)'
				break;
			case 'INTEGRAL':
				return '我的积分 (个)'
				break;
			case 'CONTRIBUTION':
				return '我的贡献值'
				break;
			default:
				break;
		}
	}
	//格式化时间戳
	const formatTime = (timestamp) => {
		return timeFormat(timestamp, 'yyyy-mm-dd hh:MM')
	}
	const currentTab = ref(0)
	const tabMaps = [{
			name: '全部',
			value: '',
		},
		{
			name: '收入',
			value: 'RECEIVE',
		},
		{
			name: '支出',
			value: 'CONSUMPTION',
		},

	];
	// 切换选项卡
	const onTabsChange = async (e) => {
		console.log('切换选项卡', e);
		currentTab.value = e.index;
		pageInfo.pageNo = 1
		pageInfo.operation = e.value
		// dataList.value = []

		paging.value.reload()

	}
	const balanceInfo = ref({})
	//获取余额
	const getTokenBalance = async () => {
		let res = await assetApi.getAssetDetails(pageInfo.type)
		console.log('获取余额', res)
		// setTimeout(() => {
		if (res.code == 0) {
			balanceInfo.value = res.data
		}

	}


	const customStyle = ref('')
	const getElementStyle = () => {
		const systemInfo = uni.getSystemInfoSync()

		let windowWidth = systemInfo.windowWidth

		let styleObj = {
			width: windowWidth - 2 * 10 + 'px',

		}
		customStyle.value = styleObj
	}
	onShow(() => {
		getTokenBalance()
		getElementStyle()
	})
	onLoad((ops) => {
		console.log('ops', ops);
		pageInfo.type = ops.type
		isT.value=uni.getStorageSync("userinfo").isTransfer
	})
</script>

<style lang="scss" scoped>
	page {
		// height: auto;
		// // background: linear-gradient(to bottom, #2E54DF, #F6F6FA 50%);
		// background-image: url('@/static/images/me-bj.png');
		// background-position: center;
		// background-size: cover;
		// background-repeat: no-repeat;
	}


	.top {
		// width: 100vw;
		height: calc(100vw * 180.0 / 375);
		background: linear-gradient(180deg, #54C5C1 18%, rgba(255, 255, 255, 0) 80%);
		width: 100vw;

	}

	.nav-bg {
		// width: 100vw;
		// height: calc(100vw * 150.0 / 375);
		// position: absolute;
		// top: 0;
		// z-index: -10;

	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.top-box {
		width: 100vw;
		height: calc(100vw * 150.0 / 375);
		position: relative;
	}

	.total-box {
		// width: 90%;
		// margin: 0 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);

		.line {
			width: 2rpx;
			min-height: 80rpx;
			background: white;
		}

		.total-team {
			display: flex;
			// flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.left {
				line-height: 2;
				margin-bottom: 10rpx;
				text-align: center;

				.name {
					font-size: 24rpx;
					// font-weight: 550;
				}

				.value {
					color: #4D7BFF;
					font-weight: bold;
					font-size: 44rpx;
					// text-align: center;
				}
			}

			%btn {
				font-size: 26rpx;
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				border-radius: 100rpx;
			}

			.btn1,
			.btn2 {
				@extend %btn;
				color: #4D7BFF;
				border: 2rpx solid;

			}


			.btn3 {
				@extend %btn;
				color: #fff;

				background: #467EF3;
				margin-left: 20rpx;

			}
		}

		.total-identity {
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-radius: 10rpx;
			background-color: #EDF1FF;
			padding: 30rpx 0rpx;
			box-sizing: border-box;

			.identity-item {
				text-align: center;
				line-height: 1.8;

				.name {
					font-size: 30rpx;
					font-weight: 550;
				}

				.value {
					font-size: 32rpx;
					color: #4D7BFF;
					font-weight: bold;
				}
			}
		}
	}

	.my-team {
		width: 100%;
		padding: 20rpx;
		// display: flex;
		// justify-content: center;
		// margin: 20rpx 0;
		font-weight: bold;
		font-size: 30rpx;
		color: #4D7BFF;
	}

	.tabs {
		width: 100%;
		margin-bottom: 20rpx;

	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logs-box {
		// margin-top: 20rpx;
		background: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.log {
			width: 100%;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 16rpx;
			box-sizing: border-box;
			line-height: 1.8;
			border-radius: 10rpx;
			// box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.05);

			.log-left {
				font-size: 26rpx;
				display: flex;
				align-items: center;
				max-width: 71%;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.operation {
					font-weight: 550;

				}

				.time {
					font-size: 24rpx;
					color: #838383;
				}
			}

			.log-right {
				font-size: 28rpx;
				font-weight: 600;

			}
		}

		.line {
			height: 2rpx;
			width: 100%;
			background: #F1F1F1;

		}
	}
</style>